<template>
  <div>
    <el-dialog title="审核事件" :visible.sync="isShow">
      <el-table :data="gg_event">
        <!-- 提交时间 -->
        <el-table-column
          prop="event_time"
          label="提交时间"
          width="150px"
        ></el-table-column>
        <!-- 提交人 -->
        <el-table-column prop="username" label="提交人"></el-table-column>
        <!-- 事发地点 -->
        <el-table-column prop="event_addr" label="事发地点"></el-table-column>
        <!-- 事发详情 -->
        <el-table-column
          prop="event_describe"
          label="事发详情"
        ></el-table-column>
        <!-- 审核状态 -->
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <div>{{ scope.row.event_status | handleState }}</div>
            <el-switch
              :value="scope.row.event_status == 0 ? false : true"
              @click.native="changeAudit(scope.row)"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <!-- 操作-忽略 -->
        <el-table-column prop="" label="操作" class="operation">
          <template slot-scope="scope">
            <el-button
              class="ignore"
              type="primary"
              size="small"
              @click="handleDelete(scope.row.event_id)"
              :disabled="scope.row.event_status == 0 ? true : false"
            >
              忽略
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[2, 4, 6, 8, 10]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 父组件从ReportAccident子组件传过来的
  props: {
    dialogFormVisible2: '',
  },
  data() {
    return {
      dialogFormVisible1: true,

      gg_event: [],
      // username: [],

      //这里是全部的event_status
      status: [],

      // 分页器相关data
      page: 1, // 当前的页码数
      size: 4, // 每页显示记录数
      total: 0, // 记录总数
    }
  },
  //   过滤器，
  filters: {
    handleState(value) {
      if (value == 0) {
        return '未审核'
      } else if (value == 1) {
        return '已审核'
      }
    },
  },
  computed: {
    isShow: {
      get() {
        return this.dialogFormVisible2
      },
      set(val) {
        this.$emit('send')
      },
    },
  },
  created() {
    this.getAll()
  },
  methods: {
    // 发送回父组件
    changeVisible1() {
      this.$emit('send')
    },
    // 获取所有事件
    getAll() {
      // 只有admin和traffic可以显示
      this.$http
        .get(`/gg_event?page=${this.page}&size=${this.size}`)
        .then((res) => {
          let arr = res.result.data
          // 更新total
          this.total = res.result.total
          arr.forEach((item) => {
            this.$http.get('/gg_user/' + item.user_id).then((res) => {
              if (res.result) item.username = res.result.user_name
            })
          })
          // this.gg_event = arr
          // 放置发布人信息消失
          setTimeout(() => {
            this.gg_event = arr
            // this.gg_event.forEach((value, index) => {
            //   value['username'] = this.username[index]
            // })
          }, 500)
          // console.log(this.gg_event)s
        })
    },
    // 审核状态改变
    changeAudit(value) {
      var status = ''
      if (value.event_status == 1) {
        status = 0
      } else if (value.event_status == 0) {
        status = 1
      }
      this.$http
        .put('/gg_event/' + value.event_id, {
          event_id: value.event_id,
          event_status: status,
        })
        .then((res) => {
          if (res.code == '0') {
            this.$message({
              type: 'success',
              message: '更新成功',
              duration: 1500,
            })
          }
          this.$set(value, 'event_status', status)
        })
      // this.getAll()
    },
    // 操作-忽略
    handleDelete(value) {
      console.log(value)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http.delete('/gg_event/' + value).then((res) => {
            this.getAll()
          })
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 分页器
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.size = val
      this.getAll()
    },
    handleCurrentChange(val) {
      // 改变默认的页数
      this.page = val
      this.getAll()
    },
  },
}
</script>

<style>
.block {
  margin-top: 13px;
}
.operation {
  margin: 20px;
}
</style>
